html {
  font-family: SFUIText-Regular, PingFang-SC, 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
  color: var(--text-color);
}
a:hover,input:hover,button:hover,textarea:hover,a:focus,input:focus,button:focus,textarea:focus {
  outline: none;
}
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.unselected {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.underline {
  text-decoration: underline;
}
a.underline {
  text-decoration: underline;
}


.flex {display: flex;}
.flex-items-center {align-items: center;}
.flex-center {justify-content:center;}
.flex-between {justify-content: space-between;}
.flex-around {justify-content: space-around;}
.flex-evenly {justify-content: space-evenly;}
.felx-start {justify-content:flex-start;}
.felx-end {justify-content:flex-end;}
.flex-column {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}
.flex-1 {flex: 1; min-width: 0;}
.flex-2 {flex: 2; min-width: 0;}
.flex-3 {flex: 3; min-width: 0;}
.flex-4 {flex: 4; min-width: 0;}
.flex-5 {flex: 5; min-width: 0;}
.flex-6 {flex: 6; min-width: 0;}

.lh13 {line-height: 1.3;}
.lh14 {line-height: 1.4;}
.lh15 {line-height: 1.5;}
.lh16 {line-height: 1.6;}
.lh17 {line-height: 1.7;}
.lh18 {line-height: 1.8;}
.lh19 {line-height: 1.9;}
.lh20 {line-height: 2;}

.page {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100vh;
  background-color: var(--bg-color);
  overflow-y: hidden;
  &.wrap {
    height: calc(100vh - 50px);
  }
}
.page-main {
  position: absolute;
  left: 0;
  top: var(--navbar-height);
  right: 0;
  bottom: 0;
  overflow-y: auto;
  &.min-height {
    min-height: calc(100vw * 1.65 - var(--navbar-height) - var(--statusbar-height));
  }
  &.fullscreen, &.no-navbar {
    top: 0;
  }
  &.padding,.padding {padding: 5PX 15PX 30PX;}
  .full {margin-left: -15PX; margin-right: -15PX; }
}

// 设置嵌入模式时page-main的top值
.app .page-main.overlays {
  top: calc(var(--statusbar-height) + var(--navbar-height));
}
.app .page-main.no-navbar.overlays {
  top: calc(var(--statusbar-height));
}
// 设置嵌入模式时且全屏幕时page-main的top值
.app .page-main.overlays.fullscreen, .app .page-main.no-navbar.overlays.fullscreen {
  top: 0;
}

// app中状态栏高度占位
.statusbar-placeholder {
  padding-top: var(--statusbar-height);
  height: 0;
  line-height: 0;
  display: none;
}
.app .statusbar-placeholder.overlays {display: block;}
.app .statusbar-placeholder.overlays.hidden {display: none;}


.inner {
  padding-left: 15PX;
  padding-right: 15PX;
}

.fit-height {height: 100%;}
.fit-width {width: 100%;}
.fit-min-height {min-height: 100%;}
.rp {position: relative;}
.ap {position: relative;}
.animated.short{animation-duration: 300ms;}
.animated.normal{animation-duration: 600ms;}
.light{font-weight: 500;}
.blod{font-weight: 700;}
.bloder{font-weight: 900;}
.lighter{font-weight: lighter;}
.disc {-webkit-text-security:disc; text-security:disc;}
.vam {vertical-align: middle;}
.box-shadow {box-shadow:@box-shadow;}
.auto-x {overflow-x: auto;}
.auto-y {overflow-y: auto;}

.white {color: var(--white);}
.black {color: var(--black);}
.gray-1 {color: var(--gray-1);}
.gray-2 {color: var(--gray-2 );}
.gray-3 {color: var(--gray-3);}

.f10 {font-size:10px;}
.f11 {font-size:11px;}
.f12 {font-size:12px;}
.f13 {font-size:13px;}
.f14 {font-size:14px;}
.f15 {font-size:15px;}
.f16 {font-size:16px;}
.f18 {font-size:18px;}
.f20 {font-size:20px;}
.f22 {font-size:22px;}
.f24 {font-size:24px;}
.f25 {font-size:25px;}
.f26 {font-size:26px;}
.f28 {font-size:28px;}
.f30 {font-size:30px;}
.f32 {font-size:32px;}
.f34 {font-size:34px;}
.f36 {font-size:36px;}
.f38 {font-size:38px;}
.f40 {font-size:40px;}
.f46 {font-size:46px;}
.f60 {font-size:60px;}

/*margin*/
.mt2 {margin-top:2px}
.mt5 {margin-top:5px}
.mt6 {margin-top:6px}
.mt8 {margin-top:8px}
.mt10 {margin-top:10px}
.mt15 {margin-top:15px}
.mt20 {margin-top:20px}
.mt22 {margin-top:22px}
.mt25 {margin-top:25px}
.mt30 {margin-top:30px}
.mt35 {margin-top:35px}
.mt40 {margin-top:40px}
.mt45 {margin-top:45px}
.mt50 {margin-top:50px}
.mt55 {margin-top:55px}
.mt60 {margin-top:60px}
.mt65 {margin-top:65px}
.mt70 {margin-top:70px}
.mt80 {margin-top:80px}
.mt90 {margin-top:90px}
.mt100 {margin-top:100px}
.mt110 {margin-top:110px}
.mt120 {margin-top:120px}
.mt150 {margin-top:1.5px}
.mt190 {margin-top:190px}

.mb10 {margin-bottom:10px}
.mb15 {margin-bottom:15px}
.mb20 {margin-bottom:20px}
.mb30 {margin-bottom:30px}
.mb40 {margin-bottom:40px}
.mb50 {margin-bottom:50px}
.mb60 {margin-bottom:60px}
.mb100 {margin-bottom:100px}

.ml5 {margin-left:5px}
.ml10 {margin-left:10px}
.ml12 {margin-left:12px}
.ml15 {margin-left:15px}
.ml20 {margin-left:20px}
.ml25 {margin-left:25px}
.ml30 {margin-left:30px}
.ml40 {margin-left:40px}
.ml45 {margin-left:45px}
.ml50 {margin-left:50px}
.ml70 {margin-left:70px}
.ml80 {margin-left:80px}
.ml100 {margin-left:100px}
.ml120 {margin-left:120px}
.ml150 {margin-left:150px}
.ml300 {margin-left:300px}

.mr5 {margin-right:5px}
.mr10 {margin-right:10px}
.mr15 {margin-right:15px}
.mr20 {margin-right:20px}
.mr30 {margin-right:30px}
.mr40 {margin-right:40px}
.mr50 {margin-right:50px}
.mr100 {margin-right:100px}

/*padding*/
.p10 {padding:10px;}
.p15 {padding:15px;}
.p30 {padding:30px;}

.pt0 {padding-top: 0;}
.pt5 {padding-top:5px}
.pt8 {padding-top:8px}
.pt10 {padding-top:10px}
.pt15 {padding-top:15px}
.pt20 {padding-top:20px}
.pt30 {padding-top:30px}
.pt40 {padding-top:40px}
.pt45 {padding-top:45px}
.pt50 {padding-top:50px}
.pt60 {padding-top:60px}

.pb5 {padding-bottom:5px}
.pb10 {padding-bottom:10px}
.pb15 {padding-bottom:15px}
.pb20 {padding-bottom:20px}
.pb30 {padding-bottom:30px}
.pb40 {padding-bottom:40px}
.pb50 {padding-bottom:50px}
.pb100 {padding-bottom:100px}

.pl5 {padding-left:5px}
.pl10 {padding-left:10px}
.pl15 {padding-left:15px}
.pl20 {padding-left:20px}
.pl30 {padding-left:30px}
.pl35 {padding-left:35px}
.pl40 {padding-left:40px}
.pl45 {padding-left:45px}
.pl50 {padding-left:50px}
.pl80 {padding-left:80px}
.pl100 {padding-left:100px}

.pr5 {padding-right:5px}
.pr10 {padding-right:10px}
.pr15 {padding-right:15px}
.pr20 {padding-right:20px}
.pr30 {padding-right:30px}
.pr40 {padding-right:40px}
.pr50 {padding-right:50px}
.pr100 {padding-right:100px}
